<template>
	<div class="Wrap">
		<div class="main">
			<!-- 版心区中视频播放功能播放区以及侧边滑动栏部分 -->
			<div class="videoWrap">
				<video-player
					class="video"
					src="../1.mp4"
					controls
					:loop="true"
					:volume="0.6"
					:width="900"
					:height="500"
					:duration="60"
				/>
				<div class="sideBar">
					<div class="top1">本课程共32节 总时长 03:24:02</div>
					<div class="top2">
						1个课程附件
						<ArrowUp style="width: 1em; height: 1em" />
						<ArrowDown style="width: 1em; height: 1em" />
					</div>
					<div class="middle">
						<ul class="infinite-list" style="overflow: auto">
							<li v-for="item in count" class="infinite-list-item">
								<img src="../../../mockData/image/2045575.jpg" />
								<text>{{ item }}</text>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 版心区中视频播放功能中间信息部分 -->
			<div class="middleWrap">
				<div class="left">
					<text><Monitor style="width: 1em; height: 1em" />4.6W</text>
					<text><Download style="width: 1em; height: 1em" />307</text>
					<text><Share style="width: 1em; height: 1em" />1744</text>
				</div>
				<div class="right">
					<text><Headset style="width: 1em; height: 1em" />音频</text>
					<text><Paperclip style="width: 1em; height: 1em" />缓存</text>
					<text><Star style="width: 1em; height: 1em" />分享</text>
				</div>
			</div>
			<!-- 版心区中视频播放功能底部信息部分 -->
			<div class="saleInfoWrap">
				<div class="left">
					<div class="top">
						<span
							>【零基础/初级 古典舞身韵屋子技法训练教程】 (普及型-附训练组合) -
							青云舞社</span
						>
						<span>￥108.00</span>
					</div>
					<div class="bottom">
						<div>
							<img src="../../../mockData/image/2045575.jpg" />
							<span>青云舞社-子颜 卖家评价 4.9</span>
						</div>
						<div class="common">
							<ChatDotRound
								style="width: 1em; height: 1em; margin-right: 8px"
							/>
							联系TA
						</div>
						<div class="common">
							<Plus style="width: 1em; height: 1em; margin-right: 8px" /> 关注
						</div>
						<div class="common">发布时间：22-10-18</div>
						<div class="common">
							<div>开通会员，本课程免费学</div>
							<div>193人已购</div>
						</div>
					</div>
				</div>
				<div class="right">购买学习</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { VideoPlayer } from "@videojs-player/vue"
import "video.js/dist/video-js.css"
import {
	ArrowUp,
	ArrowDown,
	Headset,
	Share,
	Download,
	Monitor,
	Paperclip,
	Star,
	Plus,
	ChatDotRound,
} from "@element-plus/icons-vue"

const count = ref(20)
</script>

<style scoped>
/* 版心区：总宽 1200 ；视频播放功能区总高 700 */
.Wrap {
	width: 100%;
	background-color: #1e1e1e;
	color: #b1b5c1;
}
.Wrap .main {
	width: 1200px;
	margin: 0 auto;
}
/* //////////////////////////////////////////////////////videoWrap////////////////////////////////////////////////////////////////// */
.Wrap .main .videoWrap {
	width: 1200px;
	height: 100%;
	display: flex;
}
.Wrap .main .videoWrap .video {
	margin: 0 auto;
}
>>> .vjs-big-play-button {
	display: none !important;
}
.Wrap .main .videoWrap .sideBar {
	width: 300px;
	height: 500px;
	background-color: #121212 !important;
	text-align: center;
}
.Wrap .main .videoWrap .sideBar .top1 {
	height: 46px;
	line-height: 46px;
	color: white;
	background-color: #333333;
}
.Wrap .main .videoWrap .sideBar .top2 {
	height: 30px;
	line-height: 30px;
	color: white;
	font-size: 14px;
	background-color: #212121;
}
.Wrap .main .videoWrap .sideBar div {
	width: 100%;
}
.Wrap .main .videoWrap .sideBar .middle {
	height: 424px;
}
.Wrap .main .videoWrap .sideBar .middle .infinite-list-item {
	box-sizing: border-box;
	padding: 0 5px;
	display: flex;
	justify-content: space-between;
}
.Wrap .main .videoWrap .sideBar .middle .infinite-list-item img {
	width: 142px;
	height: 80px;
}
/* ////////////////////////////////////////////////middleWrap////////////////////////////////////////////////////////////////////// */
.middleWrap {
	height: 60px;
	display: flex;
	justify-content: space-between;
	text-align: center;
	line-height: 60px;
}
.middleWrap text {
	margin: 0 20px;
	padding-right: 15px;
}
.middleWrap .right text {
	border-right: 1px solid #eee;
}
/* //////////////////////////////////////////////////saleInfoWrap//////////////////////////////////////////////////////////////////// */
.Wrap .main .saleInfoWrap {
	width: 1200px;
	height: 134px;
	color: white;
	display: flex;
	justify-content: space-between;
}
.Wrap .main .saleInfoWrap .left {
	width: calc(1200px - 134px);
	box-sizing: border-box;
	padding-right: 20px;
}
.Wrap .main .saleInfoWrap .left .top {
	height: 46px;
	display: flex;
	justify-content: space-between;
}
.saleInfoWrap .left .bottom {
	display: flex;
	justify-content: space-evenly;
	height: 88px;
}
.saleInfoWrap .left .bottom .common {
	box-sizing: border-box;
	padding-top: 28px;
}
.saleInfoWrap .left .bottom img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
}
.Wrap .main .saleInfoWrap .right {
	width: 134px;
	color: white;
	text-align: center;
	line-height: 134px;
	font-size: 30px;
	background-color: #f93684;
}
</style>

<style>
.infinite-list {
	height: 424px;
	padding: 0;
	margin: 0;
	list-style: none;
}
.infinite-list .infinite-list-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 102px;
	margin: 10px;
	color: white;
}
.infinite-list::-webkit-scrollbar {
	width: 0 !important;
}
.infinite-list-item::-webkit-scrollbar {
	width: 0 !important;
}
</style>
